본문으로 건너뛰기

<Profiler>

🧑🏻‍💻 Profiler​

<Profiler>를 사용하면 프로그램적으로 React 트리의 렌더링 성능을 측정할 수 있다.

✅ Profiler 문법​

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>
  • 컴포넌트 트리를 <Profiler>로 감싸서 렌더링 성능을 측정한다.
  • id는 측정 중인 UI 부분을 식별하는 문자열이다.
  • onRender는 프로파일링된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 콜백이다.

🧑🏻‍💻 알고 가기​

✅ onRender 콜백​

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // 렌더링 타이밍을 집계하거나 로그를 남긴다.
}
  • React는 렌더링된 내용에 대한 정보와 함께 onRender 콜백을 호출한다.
  • onRender 콜백은 렌더링된 내용과 소요된 시간에 대한 정보를 담는다.

✏️ 측정할 수 있는 정보들​

id<Profiler> 트리의 id 문자열 prop
phase트리가 마운트 되었거나, props, state에 변화로 인한 리 렌더링 확인
actualDuration현재 업데이트에 대해 걸린 시간 (밀리초)
baseDuration최적화 없이 리렌더링에 걸리는 시간 (밀리초)
startTime현재 업데이트를 시작한 시점에 대한 숫자 타임 스탬프
endTime업데이트를 완료한 시점의 타임 스탬프

✅ 사용 꿀팁​

  • 프로파일링은 약간의 오버헤드를 추가하므로 상용 빌드에서는 기본적으로 비활성화되어 있다.
  • <Profiler>를 사용하면 프로그램적으로 측정값을 수집한다. 만약 대화형 프로파일러를 찾고 있다면 React 개발자 도구의 프로파일러 탭을 사용하자.
  • 사용할 때마다 애플리케이션에 약간의 CPU 및 메모리 오버헤드가 추가되기 때문에 필요한 경우에만 사용하자.

🧑🏻‍💻 활용 및 생각할 거리​

✅ CRA 환경에서 profiling build하기​

yarn build --profile

npm run build -- --profile